<!--
 * @Descripttion: 选择厂家
 * @version: 
 * @Author: hutao
 * @Date: 2021-12-30 14:30:05
 * @LastEditors: hutao
 * @LastEditTime: 2023-04-28 10:56:21
-->
<template>
  <el-select v-if="!readonly"
             :disabled="disabled"
             :clearable="clearable"
             filterable
             v-model="state.value"
             @change="onChange"
             style="width:100%"
             placeholder="请选择">
    <el-option v-for="item in state.dataSource"
               :key="item.id"
               :label="`${item.warehouseName}`"
               :value="item.warehouseCode">
    </el-option>
  </el-select>
  <!-- <el-select
    v-if="!readonly"
    v-model="state.value"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option
      v-for="item in state.dataSource"
      :key="item.id"
      :label="`${item.name}`"
      :value="item.id"
    >
    </el-option>
  </el-select> -->
  <span v-else>{{ state.showName }}</span>
</template>
<script lang="ts">
import { GetWineWarehouseListInput, WineWareHouseApi } from "@/plugins/api";
import { _axios } from "vue-kst-auth";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  value?: string;
  showName?: string;
  dataSource: any[];
}
@Component
export default class Index extends Vue {
  WineWareHouseApi = new WineWareHouseApi("/alcohol-management", _axios);
  @Prop() value!: string;
  /** 是否可以清除 */
  @Prop({ default: true }) clearable!: string;
  /* 是否只读 */
  @Prop({ default: false }) readonly?: boolean;
  /** 是否禁用 */
  @Prop() disabled?: boolean;
  /** 数据 */
  state: State = {
    loading: false,
    value: "",
    showName: "",
    dataSource: [],
  };
  /** 生命周期 */
  created() {
    this.state.value = this.value;
    if (!this.readonly) {
      this.remoteMethod();
    }

    //this.getDataSource();
  }
  /**  数据查询 */
  // getDataSource() {
  //   this.state.loading = true;
  //   this.ProductTreeNodeLevelApi.all()
  //     .then((res) => {
  //       this.state.dataSource = res.items || [];
  //     })
  //     .finally(() => {
  //       this.state.loading = false;
  //     });
  //   //
  // }
  remoteMethod(query?: string) {
    // if (query) {
    this.state.loading = true;
    const body = new GetWineWarehouseListInput({
      maxResultCount: undefined,
      skipCount: undefined,
      sorting: undefined,
      searchContent: undefined,
      warehouseLocation: undefined,
      department: undefined,
      isEnabled: undefined,
    });
    this.WineWareHouseApi.list4(body)
      .then((res: any) => {
        this.state.dataSource = res.items || [];
      })
      .finally(() => {
        this.state.loading = false;
      });
    // } else {
    //   this.state.dataSource = [];
    // }
  }
  /** 方法 */
  onChange() {
    this.$emit("input", this.state.value);
    this.$emit("change", this.state.value);
  }
  /** 监听 */
  @Watch("value", { immediate: true })
  onValue(val: string) {
    this.state.value = val;
    if (this.readonly) {
      if (val) {
        // this.ProductFactoryApi.productFactories3(val).then((res) => {
        //   this.state.showName = res.factoryName;
        // });
      }
    } else {
      //
    }
  }
  /** 计算属性 */

  get getName() {
    const data = this.state.dataSource.find(
      (item: any) => item.id === this.value
    );
    return data ? data.factoryName : "";
  }
}
</script>
<style lang="scss" scoped></style>
